<template>
    <div>
        <template>
            <div class="align-right">
              <el-form :inline="true" :model="listQuery">
                  <div class="pull-right">
                      <el-form-item>
                        <el-select clearable v-model="listQuery.columnId" placeholder="请选择">
                            <el-option
                                v-for="item in columns"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                    <el-input
                        placeholder="请输入标题关键词"
                        clearable
                        v-model="listQuery.title">
                    </el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="handleSearch" icon="el-icon-search" >搜索</el-button>
                    </el-form-item>
                  </div>
                  <div>
                   <el-button round @click="back" size="small" icon="el-icon-back">返回</el-button>
                    <el-button  @click="addMagazineContent">新增杂志内容</el-button>
                  </div>
              </el-form>
            </div>
            <el-table
                v-loading="loading"
                class="mb20"
                ref="magazine_table"
                :data="content_tables"
                row-key="id"
                border
                highlight-current-row
                @selection-change="handleSelectionChange"
                style="width: 100%">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
               <el-table-column align="center" label="序号" min-width ="70" >
                    <template slot-scope="scope">
                        <span>{{ scope.$index+1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="标题" min-width ="450" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="栏目" min-width ="80" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.columnNm }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发布时间" min-width ="155" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.publishDt }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发布者" min-width ="100" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.promulgator }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="喜欢" min-width ="80" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.likeNum }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width ="270" >
                    <template slot-scope="scope">
                        <el-button type="text"  @click="edit(scope)">编辑</el-button>
                        <el-button type="text"  @click="remove(scope)">删除</el-button>
                        <!-- <el-button type="text" @click="push(scope)">推送</el-button>
                        <span>|</span>
                        <el-button type="text" @click="setFreeRead(scope)">设置试读</el-button>
                        <span>|</span>
                        <el-button type="text" @click="comment(scope)">评论</el-button> -->
                         <el-button type="text" v-clipboard:copy='scope.row.id' v-clipboard:success='clipboardSuccess'>复制ID</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-col :span="24" style="margin-top:10px" v-if="content_tables.length>0">
                <el-button size="small" @click="bathRemove">批量删除</el-button>
            </el-col>
             <el-col :span="24" class="pagination-warp" v-if="content_tables.length>0">
                <div class="text-center">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="listQuery.currentPage"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="listQuery.size"
                        layout="total, sizes, prev, pager, next ,jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </el-col>
        </template>
    </div>
</template>
<script>
import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
import { getSelectColumnBox } from '@/api/magazine/magazinecolumn'
import { getSinglePeriodContents, delMagazineContent, delMagazineContents } from '@/api/magazine/magazinecontent'
export default {
     directives: {
        clipboard
    },
    data() {
        return {
            loading:false,
            content_tables: [],
            total: null,
            selections:[],
            columns:[],
            listQuery: {
                currentPage: 1,
                size: 10,
                magazineId:this.$route.query.id,
                columnId: '',
                title: undefined  
            }
        }
    },
    created() {
        this.getList()
        const magazineId = this.$route.query.id
        if(magazineId !== undefined){
            this.getMagazineColumn(magazineId)
        }
    },
    methods:{
        getList(){
            this.loading = true
            const params = this.listQuery
            getSinglePeriodContents(params).then(response => {
                if(response.code === 0){
                    this.content_tables = response.data.records
                    this.total = response.data.total
                     this.loading = false
                }
            })
        },
        handleSearch(){
            this.listQuery.currentPage = 1
            this.getList()
        },
        handleSizeChange(val) {
            this.listQuery.currentPage = 1
            this.listQuery.size = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.listQuery.currentPage = val
            this.getList()
        },
        handleSelectionChange(values){
            this.selections = []
            values.forEach(v => {
                let data = {id:v.id}
                this.selections.push(data)
            })
        },
        clipboardSuccess() {
            this.$message({
                message: '复制成功',
                type: 'success',
                duration: 1500
            })
        },
        addMagazineContent() {
            const id = this.$route.query.id
            const period = this.$route.query.router
            this.$router.push({path:"/magazine/addMagazineContent",query:{magazineId:id,period:period,router:"新增杂志文章"}})
        },
        edit(scope){
            const period = this.$route.query.router
            this.$router.push({path:"/magazine/addMagazineContent",query:{contentId:scope.row.id,period:period,router:"编辑杂志文章"}})
        },
        comment(scope){
            const currentRouter = this.$route.query.router
            this.$router.push({path:"/magazine/magazineComment",query:{id:scope.row.id,router:currentRouter+'>'+ scope.row.title}})
        },
        remove(scope){
            const row = scope.row
            this.$confirm('此操作将删除此篇文章, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delMagazineContent(row).then(response => {
                    if(response.code === 0){
                        this.$message({
                            type: 'success',
                             message: response.msg
                        })
                        this.getList()
                    }
                })
          
            }).catch(() => {
            
            })
        },
        bathRemove(){
            if(this.selections.length === 0){
                this.$message({
                    type: 'warning',
                    message: '至少选择一行数据'
                })
                return
            }
            let data = this.selections
            this.$confirm('确认批量删除已选中内容?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delMagazineContents(data).then(response => {
                    if(response.code === 0){
                        this.$message({
                            type: 'success',
                             message: response.msg
                        })
                        this.getList()
                    }
                })
          
            }).catch(() => {
            
            })
        },
        getMagazineColumn(magazineId){
            const params = {magazineId:magazineId}
            getSelectColumnBox(params).then((response) => {
                if (response.code === 0) {
                    this.columns = response.data
                    this.columns.unshift({id:'',name:'全部'})
                }
            })
        },
        back(){
          this.$router.back(-1)
        }
     }
} 
</script>